'use strict';
let G = new function() {
	let Panel = class extends BaseNode {
		constructor(p = {}) {
			super(p);
			this.size = p.size||vec2(210, 120);
			
			this.background = p.background||'#222222';
			this.borderColor = p.borderColor||'rgba(0,0,0,0)';
		}
		_draw(ctx) {}
		draw(ctx, offset = vec2()) {
			let pos = this.globalPos.plus(offset);
			
			ctx.save();
			ctx.beginPath();
			ctx.fillStyle = this.background;
			ctx.strokeStyle = this.borderColor;
			ctx.fillRect(pos.x, pos.y, this.size.x, this.size.y);
			ctx.strokeRect(pos.x, pos.y, this.size.x, this.size.y);
			
			this._draw(ctx, pos);
			ctx.restore();
		}
	};
	
	
	let PanelExample = this.PanelExample = class extends Panel {
		constructor(p = {}) {
			super(p);
			this.data = new Value(String(p.data||''));
			
			this.color = p.color||'#eeeeee';
			this.padding = p.padding||5;
		}
		_draw(ctx, pos) {
			pos.plus(this.padding, this.padding);
			
			ctx.beginPath();
			ctx.textBaseline = 'top';
			ctx.fillStyle = this.color;
			ctx.fillText(this.data.value, pos.x, pos.y);
		}
	};
	
	
	let PanelList = this.PanelList = class extends Panel {
		constructor(p = {}) {
			super(p);
			this.color = p.color||'#eeeeee';
			this.gap = p.gap||0;
			this.padding = p.padding||vec2();
		}
		_draw(ctx) {
			let prev = null;
			let offset = this.padding.buf();
			for(let i = 0; i < this._children.length; i++) {
				let el = this._children[i];
				// parent props*
				if(prev) el.draw(ctx, offset.plus(0, prev.pos.y+prev.size.y+this.gap));
				else el.draw(ctx, offset);
				prev = el;
			};
		}
	};
};